<template>
    <div class="login-content">
            <header><img class="login-image" src="../../images/登录背景.jpg"></header>
        <div class="login-box">
        
            <div class="phone-number">输入手机号注册或登录</div>
            <div class="line">
                <input v-model="loginObj.phone" type="text" placeholder="请输入手机号">
            </div>
            <div class="line">
                <input v-model="loginObj.code" type="text" placeholder="请输入验证码">
                <span @click="getCodeEvt">{{codeBtnMsg}}</span>
            </div>
              <div class="check">
                <van-checkbox v-model="agree" shape="square" checked-color="#f27b5d">同意壹心理《用户协议》与《隐私政策》</van-checkbox>
            </div>

            <van-button type="warning"
                color="linear-gradient(to right, #f27b5d, #f27b5d)"
                block
                :disabled="!canLogin"
                @click="loginEvt">登录</van-button>
        </div>
        <!-- <button class="right-B" @click="sh">收不到验证码</button> -->
    </div>

</template>

<script setup lang='ts'>
import { computed, ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { useCommonStore } from '../../store/index'
import Ajax from '../../apis/Ajax'
import { showToast, showLoadingToast, closeToast, showFailToast } from 'vant'
import { deCodeApi, enCodeApi } from '../../utils/index'

// const store = useCommonStore()
const router = useRouter()

const remember = ref(false)
const auto = ref(false)
const agree = ref(false)
const codeBtnMsg = ref('获取验证码')
const loginObj = reactive({
    "phone": "",
    "code": ""
})

const canLogin = computed(function() {
    return /^1[2-9]{1}[0-9]{9}$/.test(loginObj.phone) && /^[0-9]{4}$/.test(loginObj.code) && agree.value
})

// /* 获取验证码 */
function getCodeEvt() {
    if (codeBtnMsg.value !== '获取验证码') return

    if (!/^1[2-9]{1}[0-9]{9}$/.test(loginObj.phone)) {
        showToast({
            message: '输入正确的手机号',
            position: 'bottom'
        })
        return
    }

//     /* 设置节流标识，防止用户误点 */
    codeBtnMsg.value = '获取中...'
    Ajax({
        url: '/code/'+loginObj.phone,
        // method: "POST",
        // data: {
        //     "phone": loginObj.phone
        // }
    }).then(function(data: any) {
        console.log(data.code);
        
        if (data.code == 200) {
            showToast({
                message: '验证码：' + data.data.code,
                position: 'bottom'
            })
            looptime(Date.now())
        } else {
            codeBtnMsg.value = '获取验证码'
            showFailToast('获取验证码失败')
        }
    })
}

// /* 倒计时 */
function looptime(st: number) {
    let passTime = Math.ceil((Date.now() - st) / 1000)
    codeBtnMsg.value = '重新获取(' + (60 - passTime) + 's)'
    setTimeout(function() {
        if (passTime < 60) {
            looptime(st)
        } else {
            codeBtnMsg.value = '获取验证码'
        }
    }, 100)
}

async function loginEvt() {
    showLoadingToast({
        message: '登录中...',
        forbidClick: true,
        duration: 0
    });
    Ajax({
        url: '/code/login',
        data: loginObj,
        method: 'POST'
    }).then(function(data: any) {
        closeToast()
        if (data.code == 200) {
            // store.setToken(data.data.token)
            // store.setUserInfo(data.data)

            if (remember.value) {
                localStorage.setItem('user-phone', enCodeApi(loginObj.phone))
            } else {
                localStorage.removeItem('user-phone')
            }

            if (auto.value) {
                localStorage.setItem('auto-login-code', enCodeApi(data.data.token))
            } else {
                localStorage.removeItem('auto-login-code')
            }

            console.log(333)
            
            router.push('/heart')
        } else {
            showFailToast('登录失败')
        }
    })
    
    
}

// /* 初始化完成的时候需要判断是否记住手机号,做回显 */
onMounted(() => {
    let cache = localStorage.getItem('user-phone')
    if (!!cache) {
        cache = deCodeApi(cache)
        loginObj.phone = cache
        remember.value = true
    }

    // console.log(store.userInfo)
})
</script>


<style lang="less">
@import "../../styles/common.less";

body {
display: flex;
}


.login-content {
    display: block;
    position: relative;
    height: 100%;
    .login-image{
    display: flex;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height:(100%*0.351);
}
.phone-number{
    width: 100%;
    height:50px;
    line-height:50px;
    color:#f27b5d;
    text-align: center;
    font-size:15px;

}

    > .login-box {
        padding: 0vh 15px 0;
        > .line {
            display: flex;
            padding: 20px 0 10px 10px;
            border-bottom: solid 1px @g06;
            input {
                flex: 1;
                width: 0;
                line-height: 30px;
                background-color: transparent;
                outline: none;
                border: none;
                font-size: 1.4rem;
                color: black;
            }
            span {
                flex: 0 0 100px;
                width: 0;
                text-align: center;
                line-height: 30px;
                border-left: solid 1px @g06;
            }
        }
        > .check {
            margin: 26px 0;
        }
    }
    
    > .right-B {
        display: block;
        position: absolute;
        right:10px;
        color:@t01;
    }
}
</style>